<!--插槽-->
<script setup lang="ts">
import {reactive} from "vue";

type names = {
  name: string,
  age: number
}
const data = reactive<names[]>([
  {
    name: 'lisi',
    age: 1
  },
  {
    name: 'zhangsan',
    age: 2
  },
  {
    name: 'wangwu',
    age: 3
  }
])
</script>

<template>
  <div>
    <header class="header">
      <slot name="header-slot">header-slot默认文字</slot>
    </header>
    <main class="main">
      <div v-for="item in data">
        <slot name="main-slot" :myData="item">main-slot默认文字</slot>
      </div>
    </main>
    <footer class="footer">
      <slot name="footer-slot">footer-slot默认文字</slot>
    </footer>
  </div>
</template>

<style scoped lang="scss">
.header {
  width: 100%;
  height: 200px;
  background-color: #535bf2;
}

.main {
  width: 100%;
  height: 200px;
  background-color: aquamarine;
}

.footer {
  width: 100%;
  height: 200px;
  background-color: darkorange;
}
</style>